<template>
	<view>
		<back :showBackText="false" customClass="bg-gradual-blue text-white" title="资料详情"></back>
		<view v-if="isLoad">
			<view class="cu-bar bg-white">
				<view class="action sub-title">
					<text class="text-xl text-bold text-blue text-shadow">基本信息</text>
					<text class="text-ABC text-blue">BasicInfo</text>
				</view>
			</view>
			<view class="cu-list menu solid-top">
				<view class="cu-item">
					<view class="content">
						<text class="cuIcon-infofill text-green"></text>
						<text class="text-black">资料名称</text>
					</view>
				</view>
				<view class="padding bg-white">
					<view class="text-left text-green "
						style="font-size: 26rpx;color:#39b54a;background-color: #d7f0dbff;border-radius: 15rpx;padding: 15rpx;">
						{{info.name}}
					</view>
				</view>
				<view class="cu-item solid-top">
					<view class="content">
						<text class="cuIcon-selectionfill text-orange"></text>
						<text class="text-black">资料介绍</text>
					</view>
				</view>
				<view class="padding bg-white">
					<view class="text-left text-green "
						style="font-size: 26rpx;color:#39b54a;background-color: #d7f0dbff;border-radius: 15rpx;padding: 15rpx;">
						{{info.desc}}
					</view>
				</view>
				<view class="cu-item">
					<view class="content">
						<text class="cuIcon-rechargefill text-green"></text>
						<text class="text-black">资料价格</text>
					</view>
					<view class="action">
						<view class="cu-tag round bg-green light">{{info.price}}积分</view>
					</view>
				</view>
				<view class="cu-item">
					<view class="content">
						<text class="cuIcon-hotfill text-red"></text>
						<text class="text-black">兑换人数</text>
					</view>
					<view class="action">
						<view class="cu-tag round bg-green light text-red">{{info.hot}}</view>
					</view>
				</view>
				<view class="cu-item" v-if="info.expire_text!=''">
					<view class="content">
						<text class="cuIcon-timefill text-red"></text>
						<text class="text-black">有效期</text>
					</view>
					<view class="action">
						<view class="cu-tag round bg-green light text-red">{{info.expire_text}}</view>
					</view>
				</view>
			</view>
			<view class="cu-bar bg-white solid-top">
				<view class="action sub-title">
					<text class="text-xl text-bold text-blue text-shadow">操作资料</text>
					<text class="text-ABC text-blue">MenuList</text>
				</view>
			</view>
			<view class="cu-list menu solid-top">
				<view class="cu-item arrow " @tap="openTap" v-if="info.version==2">
					<view class="content" style="font-size: 28rpx;">
						<text class="cuIcon-read text-orange"></text>
						<text class="text-blue">查看内容</text>
					</view>
				</view>
				<view class="cu-item arrow " @tap="readTap" v-if="info.version==1">
					<view class="content" style="font-size: 28rpx;">
						<text class="cuIcon-read text-orange"></text>
						<text class="text-blue">阅读资料</text>
					</view>
				</view>
				<view class="cu-item arrow" @tap="downloadTap()" style="display: none;">
					<view class="content" style="font-size: 28rpx;">
						<text class="cuIcon-down text-orange"></text>
						<text class="text-blue">下载资料</text>
					</view>
				</view>
				<view class="cu-item arrow" @tap="exchangeTap()">
					<view class="content" style="font-size: 28rpx;">
						<text class="cuIcon-recharge text-orange"></text>
						<text class="text-blue">积分兑换</text>
					</view>
				</view>
				<view class="cu-item arrow" @tap="buyTap()">
					<view class="content" style="font-size: 28rpx;">
						<text class="cuIcon-pay text-orange"></text>
						<text class="text-blue">直接购买</text>
					</view>
				</view>
				<view class="cu-item arrow" @tap="mailTap()" style="display: none;">
					<view class="content" style="font-size: 28rpx;">
						<text class="cuIcon-mail text-orange"></text>
						<text class="text-blue">发送到邮箱</text>
					</view>
				</view>
				<view class="cu-item arrow" @tap="helpTaskTap()" style="display: none;">
					<view class="content" style="font-size: 28rpx;">
						<text class="cuIcon-group text-orange"></text>
						<text class="text-blue">好友助力免费拿资料</text>
					</view>
				</view>
			</view>
			<view class="margin-top">
				<adbanner unitId="adunit-e9f553c403a978f6"></adbanner>
			</view>
		</view>
		<view class="cu-modal" :class="showProcessModal ? 'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">正在加载资料中</view>
				</view>
				<view class="padding bg-white">
					<view class="cu-progress">
						<view class="bg-blue" :style="[{ width:processRate}]">{{processRate}}</view>
					</view>
				</view>
			</view>
		</view>
		<confirm title="资料内容" :content="info.content" :status.sync="showContent"
			confirmText="已复制内容" confirmTextClass="cuIcon-check">
		</confirm>
	</view>
</template>
<style src="./detail.css"></style>
<script src="./detail.js"></script>